﻿@page "/template"
@inject VersionService VersionManager
@inject IStringLocalizer<Template> Localizer
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<p>@((MarkupString)Localizer["P1"].Value)</p>

<p class="code-label">@Localizer["P2"]</p>
<Pre class="no-highlight">dotnet new -i Bootstrap.Blazor.Templates::@Version</Pre>

<p class="code-label">@Localizer["P3"]</p>
<Pre>dotnet new bbapp</Pre>

<p>@((MarkupString)Localizer["P4"].Value)</p>

<p class="code-label">@Localizer["P5"]</p>
<Pre>dotnet new --update-apply</Pre>
<p>@Localizer["P6"]</p>

<p class="code-label">@Localizer["P7"]</p>
<Pre>dotnet new -u Bootstrap.Blazor.Templates</Pre>

<h4>@Localizer["SubTitle1"]</h4>

<p>@((MarkupString)Localizer["P8"].Value)</p>

<p class="code-label mb-3">1. 下载项目模板</p>

<div class="mb-2">可以通过 <b>Visual Studio 2022 内置插件扩展</b> 或者 <b>微软插件扩展市场</b> <a href="https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate" target="_blank">[传送门]</a> 直接下载; 国内访问微软插件市场速度比较慢，可以访问码云连接 <a href="@TemplateUrl" target="_blank">[传送门]</a></div>

<img src="_content/BootstrapBlazor.Shared/images/seach-extensions.png" style="width: 800px; border-radius: 6px;" class="d-none d-sm-block mb-3" />

<img src="_content/BootstrapBlazor.Shared/images/download-extensions.png" style="width: 800px; border-radius: 6px;" class="d-none d-sm-block mb-3" />

<p class="code-label mb-3">2. 安装项目模板</p>

<img src="_content/BootstrapBlazor.Shared/images/install-extensions.png" style="width: auto; border-radius: 6px;" class="d-none d-sm-block mb-3" />

<img src="_content/BootstrapBlazor.Shared/images/install-finish.png" style="width: auto; border-radius: 6px;" class="d-none d-sm-block mb-3" />

<p class="code-label mb-3">3. 创建项目</p>

<img src="_content/BootstrapBlazor.Shared/images/create-project.png" style="width: 800px; border-radius: 6px;" class="d-none d-sm-block mb-3" />

<img src="_content/BootstrapBlazor.Shared/images/project.png" style="width: 400px; border-radius: 6px;" class="d-none d-sm-block mb-3" />

<Video Name="template" />
